{% extends './views/layout/layout.html' %}

{% block head %}
<link rel="stylesheet" href="/public/css/sign.css" />
{% endblock %}

{% block main %}
<div class="main">

  <div class="container">
    <div class="box">
      <div class="h">
        <h2 class="title">注册</h2>
      </div>
      <div class="c">
        <form action="/signup" method="POST" class="sign-form">
          <p>
            <label for="">用户名：</label>
            <input type="text" class="input username" name="username" />
          </p>
          <p>
            <label for="">密码：</label>
            <input type="password" class="input" name="password" />
          </p>
          <p>
            <label for="">重复密码：</label>
            <input type="password" class="input" name="repassword" />
          </p>
          <p>
            <button class="btn btn-primary">注册</button>
            <a href="/signin" class="btn">我有账号，立即登录</a>
          </p>
        </form>
      </div>
    </div>
  </div>

</div>
{% endblock %}
{%block js%}
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
  const usernameDom = document.querySelector(".username")




  // 输入
  usernameDom.oninput = function () {
    if (usernameDom.timeId) {
      clearTimeout(usernameDom.timeId)
    }
    const username = this.value
    usernameDom.timeId = setTimeout(() => {
      // ajax获取数据
      axios({
        method: "post",
        url: "/api/isExist",
        data: { username }
      }).then(res => {
        console.log(res.data)
        if (res.data.code === 40010) {
          document.querySelector(".btn-primary").disabled = true
        } else {
          document.querySelector(".btn-primary").disabled = false
        }
      })

    }, 500)
  }

</script>
{% endblock %}
